<template>
  <div class="direct-order-container">
    <h4 class="section-title">基本信息</h4>
    <br>
    <section>
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="退货单号"></el-form-item>
        <el-form-item label="退货门店"></el-form-item>
        <el-form-item label="所属公司"></el-form-item>
        <el-form-item label="退货类型">
          <el-select v-model="form.region" placeholder="请选择退货类型">
            <el-option label="有货退货" value="shanghai"></el-option>
            <el-option label="无货退货" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收货仓库">
          <el-select v-model="form.region" placeholder="请选择发货主体">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收货主体">
          <el-select v-model="form.region" placeholder="请选择供货仓库">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.desc" :rows="3"></el-input>
        </el-form-item>
      </el-form>
    </section>
    <br>
    <h4 class="section-title">商品信息</h4>
    <br>
    <el-button type="primary">点击上传</el-button>
    <br>
    <el-table :data="list" style="width: 100%">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="date" label="商品编码"></el-table-column>
      <el-table-column prop="date" label="商品名称"></el-table-column>
      <el-table-column prop="date" label="单位"></el-table-column>
      <el-table-column prop="date" label="规格"></el-table-column>
      <el-table-column prop="date" label="退货数量"></el-table-column>
      <el-table-column prop="date" label="标准零售价(元)"></el-table-column>
      <el-table-column prop="date" label="退货金额(元)"></el-table-column>
    </el-table>
    <p align="right">订货数量合计： &nbsp;&nbsp;元 &nbsp;订货金额合计：&nbsp;&nbsp;元</p>
    <el-button type="primary">保存</el-button>
    <el-button type="primary">提交</el-button>
    <el-button>返回</el-button>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        form: {},
        id: '',
        type: '', // 类型new新增, edit编辑, detail详情页
        rules: {
          storeCode: [{ required: true, message: '门店编码不允许为空', trigger: 'blur' }],
          storeName: [{ required: true, message: '门店名称不允许为空', trigger: 'blur' }],
          channel: [{ required: true, message: '渠道不允许为空', trigger: 'blur' }],
          address: [{ required: true, message: '门店地址不允许为空', trigger: 'blur' }],
          company: [{ required: true, message: '所属公司不允许为空', trigger: 'blur' }],
          area: [{ required: true, message: '所属区域不允许为空', trigger: 'blur' }],
          mainBody: [{ required: true, message: '发送主体不允许为空', trigger: 'blur' }],
          defaultWarehouse: [{ required: true, message: '默认发送仓库不允许为空', trigger: 'blur' }],
          contacts: [{ required: true, message: '联系人不允许为空', trigger: 'blur' }],
          phone: [{ required: true, message: '联系电话不允许为空', trigger: 'blur' }]
        },
        list: [
          { date: '23423423' },
          { date: '23423423' },
          { date: '23423423' },
          { date: '23423423' },
          { date: '23423423' },
          { date: '23423423' },
          { date: '23423423' }
        ]
      }
    },
    methods: {
      // 接口保存新建信息
      onSaveInfo (val) {
        console.log('此处调接口', val)
      },
      onCancelInfo () {
        this.$router.push({name: 'directStore'})
      }
    },
    mounted () {
      this.type = this.$route.query.type
      if (this.type !== 'add') {
        this.id = this.$route.params.id
      }
    }
  }
</script>
<style lang="scss" scoped>
  .direct-order-container {
    padding: 20px 30px 50px;
    margin-bottom: 100px;
    background-color: #fff;
  }
  .section-title {
    border-left: 5px solid #5597FB;
    padding: 10px;
  }
</style>


